<template>
  <!-- 弹窗 -->
  <el-dialog title="分配权限" :visible="showDialog" @close="closeFn">
    <!-- 内容 -->
    <el-tree ref="tree" check-strictly show-checkbox :data="permList" :props="{ label: 'title' }" node-key="id" />
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button size="small" @click="closeFn">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { allPermission } from "@/api/permissions";
import { getRoleDetail, redactRole } from "@/api/roles";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      permList: [], // 权限列表
      checkedList: [], // 选中的权限列表
      roleId:'' // id
    }
  },
  created() {
    this.allPermission()
  },
  methods: {
    // 确认 分配权限
    async submit() {
      // getCheckedKeys: 这个是tree组件的方法，用于获取选中选项数据的方法
      this.checkedList = this.$refs.tree.getCheckedKeys()
      // console.log(39, '选中的选项', this.checkedList)
      await redactRole({
        id: this.roleId,
        permissions: this.checkedList
      })
      // 提示
      this.$message.success('分配权限成功')
      // 关闭弹窗
      this.closeFn()
    },
    // 获取权限列表
    async allPermission() {
      const { data } = await allPermission()
      // console.log(data);
      this.permList = data
    },
    // 获取角色权限详细信息
    async getRolePermission(id) {
      this.roleId = id // 保存角色id
      const { data: { permissions } } = await getRoleDetail(id)
      //  console.log(44,permissions);
      // 转换获取到的数据格式
      this.checkedList = permissions.map(item => item.id)
      //  console.log(46,this.checkedList);
      // checkList 格式 [1,2,3,4]
      //  数据回填
      this.$refs.tree.setCheckedKeys(this.checkedList)
    },
    // 关闭弹窗
    closeFn() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped>

</style>